#preview :deep {
  color: #24292e;
  padding: 0px 12px 20px 12px !important;

  ul li,
  a,
  p {
    line-height: 1.6;
    font-size: 15px !important;
  }

  img {
    max-width: 100%;
    width: auto !important;
    height: auto !important;

    &:hover {
      cursor: zoom-in;
    }
  }

  .code-pre {
    color: #333;
    border-radius: 2px;

    .hljs-keyword {
      color: #00f;
    }

    .hljs-title,
    .hljs-params,
    .hljs-function {
      color: #333;
    }

    .hljs-number {
      color: #361da3;
    }

    .hljs-meta {
      color: #2b91af;
    }

    .hljs-string {
      color: #a31515;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #333;
    line-height: 1.25;
    margin-top: 24px;
    margin-bottom: 16px;
    padding-bottom: 5px;
  }

  strong {
    font-weight: 600;
  }

  p,
  blockquote,
  ul,
  ol,
  dl,
  table,
  pre {
    margin-top: 0;
    margin-bottom: 16px;
  }

  h1 {
    font-size: 30px;
    margin-bottom: 5px;
  }

  h2 {
    margin-top: 20px;
    border-bottom: 1px solid #eaecef;
  }

  h3 {
    margin-top: 10px;
  }

  h4,
  h5,
  h6 {
    margin-top: 5px;
  }

  ul li:after {
    width: 4px;
    height: 4px;
  }

  ul li input[type='checkbox']:before {
    z-index: 199 !important;
  }

  blockquote p {
    margin-bottom: 0px;
  }

  a {
    color: #4285f4;

    &:hover {
      text-decoration: underline;
    }
  }

  .preview-img .close {
    right: 22px;
  }
}
